<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 选择器 </title>
    <style>
        .box1{
            text-decoration:line-through;
        }
    </style>
</head>
<body>
    <div class="box1">这是第一个div</div>
    <div id="box2">这是第二个div</div>
    <div>这是第三个div</div>
    <p class="box3">这是p标签</p>
    <ul class="list">
        <li>
            <p>item1</p>
            <ul>
                <li>
                    <p>cc1</p>
                </li>
                <li>
                    <p>cc2</p>
                </li>
            </ul>
        </li>
        <li>
            <p>item2</p>
        </li>
        <li>
            <p>item3</p>
        </li>
    </ul>
</body>
<script src="../lib/jquery.min.js"></script>
<script>
    $(function(){
        // $("div").css('color','red');
        // $(".box1").css('color','green');
        // $("#box2").css('color','blue');

        //并集选择器
        // $(".box1,p").css('color','red');

        //交集选择器
        // $("p.box3").css('color','blue');

       // 后代选择器
        // $(".list li p").css('color','red');

        //子选择器，只影响直接子元素
        $("ul.list > li > p").css('color','red');
    });
</script>
</html>